<template>
	<view  v-if="shareShow">
		<view class="shre-mask" @tap="togle"></view>
		<view class="share-wrap">
			<view class="share-title">分享到</view>
			
			<view class="share-type">
				<view class="share-type-item">
					<view style="color: #2ad19b;" class="share-icon iconfont icon-weixinhaoyou"></view>
					<view class="name">微信好友</view>
				</view>
				<view class="share-type-item">
					<view style="color: #514d4c;" class="share-icon iconfont icon-pengyouquan"></view>
					<view class="name">朋友圈</view>
				</view>
				<view class="share-type-item">
					<view style="color: #ee5e5e;" class="share-icon iconfont icon-weibo"></view>
					<view class="name">新浪微博</view>
				</view>  
				<view class="share-type-item">
					<view style="color: #5280ce;" class="share-icon iconfont icon-QQhaoyou"></view>
					<view class="name">QQ好友</view>
				</view>
						</block>
							</scroll-view>
			</view>
			<view class="share-cnael">
				取消
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['shareShow'],
		data() {
			return {
				
			}
		},
		methods: {
			togle(){
				this.$emit('toggle')
			}
		}
	}
</script>

<style lang="less" scoped>
	.shre-mask{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0,0,0,0.5);
		z-index: 90;
	}
.share-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;
	height: 300rpx;
	background-color: #fff;
	height: 350rpx;
	.share-title {
		text-align: center;
		font-weight: 550;
		padding: 30rpx;
	}
	.share-type {
		display: flex;
		justify-content: center;
		align-items: center;
		.share-type-item {
			display: flex;
			flex: 1; 
			flex-direction: column;
			justify-content: center;
			align-items: center; 
			.share-icon{
				font-size: 80rpx;
			}
			.name{
				color: #999;
			}
		
		}

	}
	.share-cnael{
	     display: flex;
		 height: 100rpx;
		justify-content: center;
		align-items: center;
		border-top: 2rpx solid #CCCCCC;
		margin-top: 20rpx;
	}
}
</style>
